{% extends "ad_template_base.html" %}
{% load staticfiles %}

{% block style %}
    <style>
        .tp2-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .tp2-center {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            text-align: center;
            border-radius: 0px;
            width: 85%;
        }
        .tp2-blank-line {
            height: 30px;
        }
        .tp2-img-div {
            position: relative;
        }
        .tp2-img-button {
            margin: auto;
            position: absolute;
            top: 70%;
            left: 0;
            bottom: 0;
            right: 0;
            width: 35%;
            height: 15%;
            border-radius: 5px;
            border: 0px;
            background-color: transparent;
            font-size: 1.6rem;
            font-weight: 600;
            color: #c5c5c5;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .tp2-img-button-icon {
            background-url: url('') no-repeat;
        }
        .tp2-img {
            width: 100%;
            border: 3px white solid;
        }
        @media only screen and (max-height: 580px) {
            .tp2-blank-line {
                height: 10px;
            }
            .tp2-img {
                width: 100%;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="tp2-wrapper">
        <div class="tp2-center">
            <div class="tp2-img-div">
                <img id="img_1" class="tp2-img" src="{{ img_1 }}" onerror="this.onerror=null;this.src='http://7xias2.com1.z0.glb.clouddn.com/default_600X320.jpg'" />
                <button class="tp2-img-button" ad-hot="{{ ad_id_1 }}" ad-hot-action-type="{{ hot_action_type_1 }}" ad-hot-action-param='{{ hot_action_param_1 }}'>
                    <span class="tp2-img-button-icon"></span>
                    点击查看
                </button>
            </div>
            <div class="tp2-blank-line"></div>
            <div class="tp2-img-div">
                <img id="img_2" class="tp2-img" src="{{ img_2 }}" onerror="this.onerror=null;this.src='http://7xias2.com1.z0.glb.clouddn.com/default_600X320.jpg'" />
                <button class="tp2-img-button" ad-hot="{{ ad_id_2 }}" ad-hot-action-type="{{ hot_action_type_2 }}" ad-hot-action-param='{{ hot_action_param_2 }}'>
                    <span class="tp2-img-button-icon"></span>
                    点击查看
                </button>
            </div>
            <div class="tp2-blank-line"></div>
            <div class="tp2-img-div">
                <img id="img_3" class="tp2-img" src="{{ img_3 }}" onerror="this.onerror=null;this.src='http://7xias2.com1.z0.glb.clouddn.com/default_600X320.jpg'" />
                <button class="tp2-img-button" ad-hot="{{ ad_id_3 }}" ad-hot-action-type="{{ hot_action_type_3 }}" ad-hot-action-param='{{ hot_action_param_3 }}'>
                    <span class="tp2-img-button-icon"></span>
                    点击查看
                </button>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        var night = {% if night %} true {% else %} false {%  endif %};
        var oldOnLoad = window.onload || function () {};
        window.onload = function () {
            var content_dom = document.getElementsByClassName('tp2-center')[0];
            console.log(document.getElementsByClassName('tp2-blank-line')[0].clientHeight, content_dom.lastElementChild.offsetHeight)
            content_dom.style.height = content_dom.lastElementChild.offsetTop + content_dom.lastElementChild.offsetHeight + 'px';
            oldOnLoad();
        }
    </script>
{% endblock %}